<template>
  <div class="person">

    <h2>sum值为： {{ sum }},放大十倍后：{{ bigSum }}</h2>
    <button @click="sumChange">点击加一</button>
    <hr>
    <img v-for="(dog,index) in dogList" 
    :src="dog" 
    :key="index">
    <br>
  <button @click="getDog">再来一只狗</button>
  
  </div>
</template>
<script setup lang="ts" name="person">
import  useSum from '@/hooks/useSum'
import useDog from "@/hooks/useDog"

const {sum,sumChange,bigSum} = useSum()
const {dogList,getDog} = useDog()
</script>

<style scoped>
button {
  margin: 0 5px;
}
.person {
  border-radius: 10px;
  background-color: #8ee6ea;
  margin: 20px;
}
li {
  font-size: 15px;
}
.person input {
  margin-top: 10px;
  margin-bottom: 10px;
}
img{
  height: 200px;
  margin: 0px 10px;
}
</style>
